<template>
    <div class="registerContent">
        <div class="title">
            <img src="../images/logo.png" alt="">
        </div>
        <div class="body">
            <h1 class="form-title">
                合作商户注册
            </h1>
            <h1 class="subtitle">|  用户信息</h1>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="mini">
                <el-form-item label="用户名称:" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="用户密码:" prop="pass">
                    <el-input  type="password" v-model="ruleForm.pass" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="注册类型:" prop="type">
                    <el-checkbox-group v-model="ruleForm.type">
                      <el-checkbox label="企业" name="type"></el-checkbox>
                      <el-checkbox label="个人（暂不开放）" name="type"></el-checkbox>
                      <el-checkbox label="组织团体（暂不开放）" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="注册角色:" prop="role">
                    <el-checkbox-group v-model="ruleForm.role">
                      <el-checkbox label="供应商" name="role"></el-checkbox>
                      <el-checkbox label="销售商" name="role"></el-checkbox>
                      <el-checkbox label="个人" name="role"></el-checkbox>
                      <el-checkbox label="角色1" name="role"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <h1 class="subtitle">|  主体信息</h1>
                <el-form-item label="企业全称:" prop="firmName" class="Formmiddle">
                    <el-input v-model="ruleForm.firmName"></el-input>
                </el-form-item>
                <el-form-item label="营业执照号:" prop="execute">
                    <el-input v-model="ruleForm.execute"></el-input>
                </el-form-item>
                <el-form-item label="法人代表姓名:" prop="legalName">
                    <el-input v-model="ruleForm.legalName"></el-input>
                </el-form-item>
                <el-form-item label="法人代表身份证号:" prop="legalId">
                    <el-input v-model="ruleForm.legalId"></el-input>
                </el-form-item>
                <el-form-item label="企业住所:" prop="firmAdress">
                    <el-input v-model="ruleForm.firmAdress"></el-input>
                </el-form-item>
                <el-form-item label="联系人:" prop="contact">
                    <el-input v-model="ruleForm.contact"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:" prop="phoneNumber">
                    <el-input v-model="ruleForm.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="联系邮箱:" prop="mailBox">
                    <el-input v-model="ruleForm.mailBox"></el-input>
                </el-form-item>
                <el-form-item label="邮箱验证码:" prop="mailCheck">
                    <el-input v-model="ruleForm.mailCheck"></el-input>
                    <el-button v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode" size="small">获取验证码</el-button>
                    <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span> 秒后重新发送验证码</span>
                </el-form-item>
                <el-form-item label="开户银行:" prop="bank">
                    <el-input v-model="ruleForm.bank"></el-input>
                </el-form-item> 
                <el-form-item label="开户银行账号:" prop="bankAccount">
                    <el-input v-model="ruleForm.bankAccount"></el-input>
                </el-form-item>
                <el-form-item label="营业执照扫描件:" prop="licenseImg">
                    <div v-show="!ruleForm.licenseImg" style="fontSize:13px;color:#666;">暂无</div>
                    <img :src="ruleForm.licenseImg" v-show="ruleForm.licenseImg" class="evidence-img" style="width:90px;display:block;">
                    <input type="file" @change="uploadImg($event, 'license')">
                </el-form-item>

                <el-form-item label="开户银行许可证:" prop="permissionImg">   
                    <div v-show="!ruleForm.permissionImg" style="fontSize:13px;color:#666;">暂无</div>
                    <img :src="ruleForm.permissionImg" v-show="ruleForm.permissionImg" class="evidence-img" style="width:90px;display:block;">
                    <input type="file" class="upload-btn-hidden" @change="uploadImg($event, 'permission')">
                </el-form-item>
                <el-form-item label="其他资质证件:" prop="othersImg">  
                    <div v-show="!ruleForm.othersImg" style="fontSize:13px;color:#666;">暂无</div> 
                    <img :src="ruleForm.othersImg" v-show="ruleForm.othersImg" class="evidence-img" style="width:90px;display:block;">
                    <input type="file" class="upload-btn-hidden" @change="uploadImg($event, 'others')">
                </el-form-item>

                <el-form-item label="" prop="isAgree">
                    <el-checkbox-group v-model="ruleForm.isAgree">
                      <el-checkbox label="true" name="isAgree">我已阅读<a href="">《颐德尼喜合作商家的合作协议》</a></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submitForm('ruleForm')" size="small" class='buildButton' :disabled="!ruleForm.isAgree">立即注册</el-button>
                    <!-- <el-button @click="submit()" size="small" class='buildButton'>立即注册</el-button> -->
                </el-form-item>
              </el-form>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          pass:'',
          type: [],
          role:[],
          firmName:'',
          execute:'',
          legalName:'',
          legalId:'',
          firmAdress:'',
          contact:'',
          phoneNumber:'',
          mailBox:'',
          mailCheck:'',
          trueCheck:'',
          bank:'',
          bankAccount:'',
          isAgree:false,
          imageFiles: {},
          licenseImg: '',
          permissionImg: '',
          othersImg: '',
        },
        rules: {
          name: [
            { required: false, message: '请输入用户名称', trigger: 'blur' }
          ],
          pass:[
            { required: false, message: '请输入密码', trigger: 'blur' }
          ],
          type: [
            { type: 'array', required: false, message: '请至少选择一个注册类型', trigger: 'change' }
          ],
          role: [
            { type: 'array',required: false, message: '请至少选择一个注册角色', trigger: 'change' }
          ],
          firmName: [
            { required: false, message: '请填写企业全称', trigger: 'blur' }
          ],
          execute:[
            { required: false, message: '请填写营业执照号', trigger: 'blur' }
          ],
          legalName:[
            { required: false, message: '请填写法人代表姓名', trigger: 'blur' }
          ],
          legalId:[
            { required: false, message: '请填写法人代表身份证号', trigger: 'blur' }
          ],
          firmAdress:[
            { required: false, message: '请填写企业住所', trigger: 'blur' }
          ],
          contact:[
            { required: false, message: '请填写联系人', trigger: 'blur' }
          ],
          phoneNumber:[
            { required: false, message: '请填写联系电话', trigger: 'blur' }
          ],
          mailBox:[
            { type: 'email',required: false, message: '请填写正确的邮箱格式', trigger: 'blur' }
          ],
          mailCheck:[
            { required: false, message: '请填写邮箱验证码', trigger: 'blur' }
          ],
          bank:[
            { required: false, message: '请填写开户银行', trigger: 'blur' }
          ],
          bankAccount:[
            { required: false, message: '请填写开户账号', trigger: 'blur' }
          ]
        },
        sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
        auth_time: 0, /*倒计时 计数器*/
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          console.log('duile');
          if (valid) {
            var fd = new FormData();
            fd.append('partnerName', this.ruleForm.name);
            fd.append('partnerPwd', this.ruleForm.pass);
            fd.append('registerType', this.ruleForm.type);
            fd.append('registerRole', this.ruleForm.role);
            fd.append('enterpriseName', this.ruleForm.firmName);
            fd.append('businessLicenseNum', this.ruleForm.execute);
            fd.append('legalName', this.ruleForm.legalName);
            fd.append('legalIdentityNo', this.ruleForm.legalId);
            fd.append('enterpriseResidence', this.ruleForm.firmAdress);
            fd.append('contact', this.ruleForm.contact);
            fd.append('contactPhone', this.ruleForm.phoneNumber);
            fd.append('contactEmail', this.ruleForm.mailBox);
            fd.append('verifyCode', this.ruleForm.mailCheck);
            fd.append('depositBank', this.ruleForm.bank);
            fd.append('depositBankAccount', this.ruleForm.bankAccount);
            // fd.append('imageFiles', this.ruleForm.imageFiles);
            fd.append('businessLicensePic', this.ruleForm.licenseImg);
            fd.append('depositBankPermitPic', this.ruleForm.permissionImg);
            fd.append('qualificationCertificatePic', this.ruleForm.othersImg);
            // fd.append('othersImg', this.ruleForm.othersImg);
            // let config = {
            //     headers: {
            //         'Content-Type': 'multipart/form-data'
            //     }
            // };
            // const instance=axios.create({
            //   withCredentials: true
            // }) ;
            axios.post('http://192.168.1.198:8080/partner/register', fd).then( res => {
                console.log(res.status);
                if(res.status == 200){
                  console.log('11');
                  if(res.data.status == 'success'){
                    alert('注册成功!');
                    this.$router.push('/login');
                  }
                }
            }).catch( res => {
                console.log(res);
            })
            // alert('注册成功!');
            // this.$router.replace('/login');
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },
      getAuthCode:function () {
            console.log(this.ruleForm.mailBox);
            axios.post('http://192.168.1.198:8080/partner/mail', qs.stringify({
                mailAddress: this.ruleForm.mailBox
              }))
              .then(function (response) {
                console.log(response.status);
              // this.ruleForm.trueCheck = response;
              })
              .catch(function (error) {
              console.log(error);
            });

            this.sendAuthCode = false;
            this.auth_time = 60;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
      },
      uploadImg(event, type) {
        this.ruleForm[type + 'Img'] = '';
        const file = event.target.files[0];
        if (file) {
            this.ruleForm.imageFiles[type] = event.target.files[0];
            console.log(event.target.files[0]);
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => {
                this.ruleForm[type + 'Img'] = reader.result;
            };
        }
      }
    }
  }
</script>

<style lang="scss">
    .registerContent{
        color: #666666;
        .title{
            width: 900px;
            height: 70px;
            // border: 1px solid black;
            box-shadow: 0px 5px 5px 0px #999;
            margin: 0 auto;
            img{
              height: 60%;
              margin-top: 12px;
              margin-left: 40px;
            }
        }

        .body{
            width: 450px;
            margin: 0 auto;

            .form-title{
                width: 50%;
                height: 70px;
                text-align: center;
                line-height: 70px;
                font-size: 15px;
                border-bottom: 3px solid #eeecec;
                margin:0 auto;
            }

            .subtitle{
              font-size: 13px;
              font-weight: 600;
              margin-top: 15px;
            }

            .demo-ruleForm{

              .Formmiddle{
                margin-top: 20px;
              }

              .el-checkbox__label{
                font-size: 10px;
              }

              .el-form-item__label{
                font-size: 13px;
                width: 130px!important;
              }
              .el-form-item__content{
                margin-left: 130px!important;
              }
              margin-top: 30px;


              .el-input{
              width: 70%;
              }

              .buildButton{
                width: 60%;
                margin-left: 10px!important;
              }
              .auth_text{
                font-size: 9px;
              }

              .el-button{
                background-color:#f1895c;
                color: white;
                border: none;
              }

              .el-form-item__error{
                padding-left: 10px;
              }
            }
        }
    }
</style>